<template>
  <div v-if="caseList.length">
    <el-descriptions class="margin-top" title="" :column="3" size="medium" border v-for="(item, index) in caseList" :key="index">
      <el-descriptions-item>
        <template slot="label">
          專案號
        </template>
        {{ item.itemNo }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <span :class="[ item.state == 0 ? 'blue' : 'green' ]">{{ item.state == 0 ? '進行中' : '已完成' }}</span>
        </template>
        <el-button @click="onToDetail(item.itemNo, item.state == 0 ? '0' : '1')" :type="item.state == 0 ? 'primary' : 'success'" size="small">{{ item.state == 0 ? '管理' : '查詢' }}
        </el-button>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <el-button type="primary" size="small" @click="onToMap(item.itemNo)" v-if="item.state == 0">進入地圖界面</el-button>
        </template>
        <el-button type="danger" size="small" @click="onEndCase(item.itemNo)" v-if="item.state == 0">結束</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <el-empty v-else description="暫無數據"></el-empty>
</template>

<script>
export default {
  name: 'case-index',

  data() {
    return {
      caseList: [],
      ruleForm: {
        userId: ''
      },
      loading: false
    }
  },

  created() {
    let user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.ruleForm.userId = user.id || ''
    }
  },

  mounted() {
    this.getData()
    this.emptyList()
  },

  methods: {
    getData() {
      this.$store.dispatch('netdisk/fetchLawCaseList', this.ruleForm).then(res => {
        // console.log('获取案件列表')
        // console.log(res)
        this.caseList = res
        this.loading = false

        // this.$message.success(res.message)
      }).catch(err => {
        console.error(err)
        this.loading = false
        this.$message.error(err)
        return false
      })
    },

    //清除下个页面的缓存
    emptyList() {
      this.$store.dispatch('map/emptyList').catch(err => {
        console.error(err)
        this.$message.error(err)
      })
    },

    //结束案件
    onEndCase(itNo) {
      this.$confirm('此操作將結束該案件, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$store.dispatch('netdisk/fetchEndLawCase', { itemNo: itNo }).then(res => {
          // console.log('结束案件')
          // console.log(res)
          this.loading = false
          this.$message.success(res.message)
          this.getData()
        }).catch(err => {
          console.error(err)
          this.loading = false
          this.$message.error(err)
          return false
        })
      }).catch(() => {

      })
    },

    //跳转至地图
    onToMap(itNo) {
      // let routeUrl = this.$router.resolve({
      //   name: 'mapIndex',
      //   params: { itemNo: this.itemNo }
      // })
      // window.open(routeUrl.href, '_blank')
      this.$router.push({ name: 'mapIndex', params: { itemNo: itNo } } )
    },

    onToDetail(itNo, isRead = '1') {
      this.$router.push({ name: 'caseDetailIndex', params: { itemNo: itNo, isRead: isRead } } )
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../assets/css/them.scss";

  /deep/ .el-descriptions .is-bordered {
    table-layout: fixed !important;
  }

  .blue {
    color: $baseColor
  }

  .green {
    color: $connectColor;
  }
</style>
